<template>
    <el-dialog title="新增" :visible="isShowAddDialog" width="40%" @close="dialogClose">
        <el-form :model="ruleForm" :rules="rules" ref="orderAdd" label-width="110px">

            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="ruleForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="分组标题" prop="groupTitle">
                <el-input v-model="ruleForm.groupTitle"></el-input>
            </el-form-item>
            <el-form-item label="链接" prop="link">
                <el-input v-model="ruleForm.link"></el-input>
            </el-form-item>
            <el-form-item label="图标" v-model="ruleForm.icon" prop="icon">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" width="45%">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="可见性" prop="visible">
                <el-select v-model="ruleForm.visible" class="select"></el-select>
            </el-form-item>
            <el-form-item label="级别" prop="rank">
                <el-select v-model="ruleForm.rank" class="select">
                    <el-option label="123" value="1111"></el-option>
                    <el-option label="456" value="2222"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="上级菜单ID" prop="previousId">
                <el-select v-model="ruleForm.previousId" class="select">
                    <el-option label="123" value="1111"></el-option>
                    <el-option label="456" value="2222"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="顺序" prop="number">
                <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>

    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                menuName: '',
                groupTitle: '',
                link: '',
                icon: '',
                visible: '',
                rank: '',
                previousId: '',
                number: '',
            },
            rules: {
                menuName: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                groupTitle: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                link: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                icon: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                visible: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                rank: [
                    { required: true, message: '请选择级别', trigger: 'change' }
                ],
                previousId: [
                    { required: false, trigger: 'change' }
                ],
                number: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
            },
        };

    },
    props: {
        isShowAddDialog: {
            type: Boolean
        }
    },



    methods: {
        dialogClose() {
            this.$emit('dialogClose')
        },
        submitForm() {
            this.$refs.orderAdd.validate((valid) => {
                if (!valid) {
                    return
                }
                else {
                    this.$emit('dialogClose')
                }
            });

        },
        handleRemove (file) {
            console.log(file);
        },
    }
}

</script>
  
<style lang="less" scoped>
.select{
    width: 100%;
}
</style>

  